<template>
<section class="container">
  
   <div style="margin-top: 20px;width=150%">
  <el-input placeholder="请输入内容" v-model="input2">
    <template slot="append">搜索</template>
  </el-input>
</div>

<div class="search-recommmend">
          推荐 :      <el-link href="https://element.eleme.io" target="_blank">广州</el-link> <el-link type="primary">上海</el-link> <el-link type="success">北京</el-link> 


</div>
<!-- 分页 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="4">
          </el-pagination>
        </div>
      </div>
    </el-row>
  </section>
  </template>
  
  
  <script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClick() {
        alert('button click');
      }
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      };
    }
  }
</script>


  
  <style scoped>
    .aside-item-img{
      width:260px;
      height:180px
    }
    .post-user{
      vertical-align:middle;
    }
    .post-info-left{
      vertical-align:middle;
    }
    .card-images{
      vertical-align:middle;
    }
    .search-bar{
      vertical-align:middle;
    }
    .post-title{
      vertical-align:middle;
    }
    .el-dropdown {
    vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
      margin-left: 150px;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  </style>